<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/layui.css">
	</head>
	<style>
		[v-cloak] {
			display: none
		}
	</style>

	<body>
		<div id="app" v-clock>
			<div class="layui-container">
				<div class="layui-row ">
					<div class="layui-col-md4">

						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
							<legend>实验通知</legend>
						</fieldset>
						<ul class="layui-timeline">
							<template v-for="(expr,index) in exprList" v-if="index<=2 || exprShow">

								<li class="layui-timeline-item">
									<i class="layui-icon layui-timeline-axis"></i>
									<div class="layui-timeline-content layui-text">

										<h3 class="layui-timeline-title">{{expr.beginTime}}</h3>
										<p>
											实验地点：{{expr.location}}
											<br/> 实验课程：{{expr.expName}}
											<br/> 结束时间：{{expr.endTime}}

										</p>
									</div>
								</li>
							</template>
							<li class="layui-timeline-item">
								<i class="layui-icon layui-timeline-axis"></i>
								<div class="layui-timeline-content layui-text">
									<div class="layui-timeline-title">
										<template v-if="!exprShow">
											<a><i class="layui-icon layui-icon-down" @click="isShowMoreExpr()"></i> </a>
										</template>
										<template v-if="exprShow">
											<a><i class="layui-icon layui-icon-up" @click="isShowMoreExpr()"></i> </a>
										</template>
									</div>
								</div>
							</li>
						</ul>
					</div>

					<div class="layui-col-md4">
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
							<legend>预习资料</legend>
						</fieldset>
						<ul class="layui-timeline">
							<template v-for="(pd,index) in previewDate" v-if="index <=2 || pdShow">
								<li class="layui-timeline-item">
									<i class="layui-icon layui-timeline-axis"></i>
									<div class="layui-timeline-content layui-text">
										<h3 class="layui-timeline-title">{{pd.couName}}</h3>
										<p>
											{{pd.expName}}
										</p>
									</div>
								</li>
							</template>

							<li class="layui-timeline-item">
								<i class="layui-icon layui-timeline-axis"></i>
								<div class="layui-timeline-content layui-text">
									<div class="layui-timeline-title">

										<template v-if="!pdShow">
											<a><i class="layui-icon layui-icon-down" @click="isShowPd()"></i> </a>
										</template>
										<template v-if="pdShow">
											<a><i class="layui-icon layui-icon-up" @click="isShowPd()"></i> </a>
										</template>

									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="layui-col-md4">
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
							<legend>未提交作业</legend>
						</fieldset>
						<ul class="layui-timeline">
							<template v-for="(sj,index) in submitJob" v-if="index<=2 || sjShow">
								<li class="layui-timeline-item">
									<i class="layui-icon layui-timeline-axis"></i>
									<div class="layui-timeline-content layui-text">
										<h3 class="layui-timeline-title">{{sj.expName}}</h3>
										<p>
											应提交时间：{{sj.endTime}}

										</p>
									</div>
								</li>
							</template>

							<li class="layui-timeline-item">
								<i class="layui-icon layui-timeline-axis"></i>
								<div class="layui-timeline-content layui-text">
									<div class="layui-timeline-title">
										<template v-if="!sjShow">
											<a><i class="layui-icon layui-icon-down" @click="isShowSj()"></i> </a>
										</template>
										<template v-if="sjShow">
											<a><i class="layui-icon layui-icon-up" @click="isShowSj()"></i> </a>
										</template>
									</div>
								</div>
							</li>
						</ul>
					</div>

				</div>

			</div>
		</div>

		<script src="../layui.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/jquery.cookie.js" ></script>
		<script>
			$(function() {
				
				$(document).bind("contextmenu",function(e){   
         			 return false;   
    			});
				

				var exprInform; //获得实验通知的时间、地点、名称
				$.ajax({
					xhrFields: {
						withCredentials: true
					},
					type: "get",
					url: "http://localhost:8080/student/notify/exprInform.do",
					async: false,
					dataType: "json",
					data: {
						sid: $.cookie("sid")
					},
					success: function(data) {
						if(data.info == '404') {
						window.location.href="../student/stulogin.html"
						}else{
							exprInform = data;
						}
						
					},
					error: function(data) {
						exprInform = data;
						alert("失败")
						//window.location.href="stulogin.html";
					}

				});

				var previewDate; //获得通知界面的  预习资料
				$.ajax({
					xhrFields: {
						withCredentials: true
					},
					type: "get",
					url: "http://localhost:8080/student/notify/previewDate.do",
					async: false,
					dataType: "json",
					data: {
						sid: $.cookie("sid")
					},
					success: function(data) {
						if(data.info == '404') {
						window.location.href="../student/stulogin.html"
						}else{
							previewDate = data;
						}
					},
					error: function(data) {
						previewDate = data;
						//window.location.href="stulogin.html";
					}

				});

				var submitJob;
				$.ajax({
					xhrFields: {
						withCredentials: true
					},
					type: "get",
					url: "http://localhost:8080/student/notify/submitJob.do",
					async: false,
					dataType: "json",
					data: {
						sid: $.cookie("sid")
					},
					success: function(data) {
						if(data.info == '404') {
						window.location.href="../student/stulogin.html"
						}else{
							submitJob = data;
						}
						
					},
					error: function(data) {
						submitJob = data;
						//window.location.href="stulogin.html";
					}

				});

				var vue = new Vue({
					el: "#app",
					data: {
						exprList: exprInform,
						exprShow: false,
						previewDate: previewDate,
						pdShow: false,
						submitJob: submitJob,
						sjShow: false
					},
					computed: {

					},
					methods: {
						isShowMoreExpr: function() {
							if(this.exprShow) {
								this.exprShow = false;
							} else {
								this.exprShow = true;
							}
						},
						isShowPd: function() {
							if(this.pdShow) {
								this.pdShow = false;
							} else {
								this.pdShow = true;
							}
						},
						isShowSj: function() {
							if(this.sjShow) {
								this.sjShow = false;
							} else {
								this.sjShow = true;
							}
						}

					},
					watch: {

					}

				})
			})
		</script>

	</body>

</html>